<template>
  <div>
    <div>
      <el-form :inline="true">
        <el-form-item prop="" label="">
          <GradeSelect v-model="searchForm.grade" />
        </el-form-item>
        <el-form-item>
          <ClassSelect v-model="searchForm.class" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.majoring_id" clearable filterable placeholder="请选择专业类名">
            <el-option v-for="x in majors" :key="x.value" :value="x.value" :label="x.label" />
          </el-select>
        </el-form-item>
        <el-form-item prop="" label="">
          <el-input v-model="searchForm.search" placeholder="按学生姓名搜索" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">筛选</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table v-loading="table.loading" :data="table.data" border>
        <el-table-column prop="user_info.user_id" label="学生ID" />
        <el-table-column prop="user_info.name" label="姓名/昵称" />
        <el-table-column prop="user_info.grade.grade_name" label="年级" />
        <el-table-column prop="user_info.class_name" label="班级" />
        <el-table-column prop="majoring" label="意向专业类1" align="center">
          <template slot-scope="t">
            {{ t.row.majoring.split(',')[0] }}
          </template>
        </el-table-column>
        <el-table-column prop="ranking" label="意向专业类2" align="center">
          <template slot-scope="t">
            {{ t.row.majoring.split(',')[1] }}
          </template>
        </el-table-column>
        <el-table-column prop="scheme" label="意向专业类3" align="center">
          <template slot-scope="t">
            {{ t.row.majoring.split(',')[2] }}
          </template>
        </el-table-column>
        <el-table-column label="最近选择时间" align="center">
          <template slot-scope="s">
            <span>{{ s.row.create_time }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <WrapPagination>
      <div>
        <el-pagination
          class="pagination"
          :current-page="table.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="table.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </WrapPagination>
  </div>
</template>

<script>
import { TableMixin } from '../../components/mixin'
import GradeSelect from './components/grade-select'
import ClassSelect from './components/class-select'
import { getXkMajors, getXkMajorList } from '../../api/statistics'
export default {
  name: 'CareerComplex',
  components: {
    GradeSelect: GradeSelect,
    ClassSelect: ClassSelect
  },
  mixins: [TableMixin],
  data() {
    return {
      searchForm: {
        grade: '',
        search: '',
        majoring_id: '',
        class: ''
      },
      majors: []
    }
  },
  mounted() {
    this.getList()
    this.getMajors()
  },
  methods: {
    getMajors() {
      getXkMajorList().then(res => {
        this.majors = res
      })
    },
    getList() {
      return this.wrapList(getXkMajors, {
        major_name: this.searchForm.majoring_id,
        search: this.searchForm.search,
        grade_id: this.searchForm.grade,
        class_name: this.searchForm.class
      })
    }
  }
}
</script>

<style scoped>

</style>
